<template>
  <div>
    <van-nav-bar title="黑马商城"  :right-text="ISLOGIN ?'' : '登录' "    @click-right="onClickRight"/>

    <!-- 轮播图的盒子 -->
    <van-swipe :autoplay="3000">
      <!-- 通过循环遍历添加轮播图图片 -->
      <van-swipe-item v-for="item in images" :key="item.id">
        <img :src="item.img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 中部的商品图片 -->
    <van-grid :column-num="3">
      <!-- 通过循环遍历添加商品图片 -->
      <van-grid-item v-for="(item , index) in imagesList " :key="index" icon="photo-o" @click="getPage(item.url)">
        <van-image round :src="item.image"></van-image>
        <span class="CommodityInterval">{{item.name}}</span>
      </van-grid-item>
    </van-grid>
    <!-- 底部导航标签栏 -->
    <common-footer></common-footer>
  </div>
</template>
<script>
export default {
  props: [],
  data () {
    return {
      active: 0,
      images: [],
      // 页面中间部分的商品网格数据
      imagesList: [
        {
          image: require('../../public/images/menu1.png'),
          name: ' 新闻资讯',
          url: '/newslist'
        },
        {
          image: require('../../public/images/menu2.png'),
          name: '图片分享',
          url: '/photoShare'
        },
        {
          image: require('../../public/images/menu3.png'),
          name: '留言反馈',
          url: '/leavewords'
        },
        {
          image: require('../../public/images/menu4.png'),
          name: '商品购买',
          url: '/goods'
        },
        {
          image: require('../../public/images/menu5.png'),
          name: '视频专区',
          url: '/video'
        },
        {
          image: require('../../public/images/menu6.png'),
          name: '联系我们',
          url: '/map'
        }
      ]
    }
  },
  created () {
    this.getSwipeList()
  },
  mounted () {

  },
  methods: {
    async getSwipeList () {
      const { data: res } = await this.$http.get('/api/getlunbo')
      console.log(res, 'res')
      this.images = res.message
    },
    getPage (url) {
      this.$router.push(url)
    },
    onClickRight () {
      console.log(navigator.userAgent)
      const reg = /(iPhone|iPad|iPod|iOS|Android)/i
      window.location.href = reg.test(navigator.userAgent) ? '/#/mobilelogin' : '/login'
    }
  },
  computed: {
    ISLOGIN () {
      return window.sessionStorage.getItem('isLogin')
    }
  }
}
</script>
<style lang="less" scoped>
.van-nav-bar{
   background-color: rgb(31, 130, 196);
  /deep/ .van-nav-bar__title ,
  /deep/.van-nav-bar__text{
     color:#fff
   }
}
.van-image {
  width: 40px;
  height: 40px;
}
.van-swipe img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  background-color: #fff;
  pointer-events: none;
}
.CommodityInterval {
  margin-top: 10px;
}
</style>
